<template>
  <div class="hsqin-wrap">
    <div class="turntable-wrap">
      <div class="turntable-bg">
        <div class="light"></div>
        <div class="pointer"></div>
        <div class="btn-start" @click="gameStart"></div>

        <div class="turntable-prize" :class="'turntable-prize_'+prizeList.length" ref="turntable">
          <ul class="prize" :class="'prize_'+prizeList.length" v-if="prizeList && prizeList.length">
            <li v-for="(item, index) in prizeList" :key="index">
              <div class="li-main">

                <img class="p-img" :src="item.imgUrl" />
                <p class="p-name">{{item.name}}</p>
                <p class="p-price">￥{{item.price}}</p>
              </div>

            </li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import { prefixStyle } from '../lib/prefixStyle'

  const transformCss = prefixStyle('transform-css')
  const transformJs = prefixStyle('transform-js')
  const transition = prefixStyle('transition')
  const transitionend = prefixStyle('transitionend')

  export default {
    name: 'Turntable',
    data () {
      return {
        //奖品列表
        prizeList:[
          {
            "imgUrl": "http://oss.ziyue.cn/common/active/lottery_j5.png",
            "times": 15,
            "price": "300",
            "name": "4课时",
            "idx": 0
          },
          {
            "imgUrl": "http://oss.ziyue.cn/common/active/lottery_j6.png",
            "times": 3,
            "price": "2599",
            "name": "iPad",
            "idx": 1
          },
          {
            "imgUrl": "http://oss.ziyue.cn/common/active/lottery_j4.png",
            "times": 3,
            "price": "20",
            "name": "笔记本",
            "idx": 2
          },
          {
            "imgUrl": "http://oss.ziyue.cn/common/active/lottery_j1.png",
            "times": 2,
            "price": "79",
            "name": "礼盒",
            "idx": 3
          },
//          {
//            "imgUrl": "http://oss.ziyue.cn/common/active/lottery_j2.png",
//            "times": 1,
//            "price": "468",
//            "name": "智能闹钟",
//            "idx": 4
//          },
          {
            "imgUrl": "https://oss.ziyue.cn/product/img/20200617141208596385.png",
            "times": 1,
            "price": "10",
            "name": "红包10",
            "idx": 5
          },
//          {
//            "imgUrl": "https://oss.ziyue.cn/product/img/20200617141208596385.png",
//            "times": 1,
//            "price": "5",
//            "name": "5红包",
//            "idx": 6
//          },
//          {
//            "imgUrl": "https://oss.ziyue.cn/product/img/20200617141208596385.png",
//            "times": 1,
//            "price": "2",
//            "name": "2红包",
//            "idx": 7
//          },
//          {
//            "imgUrl": "https://oss.ziyue.cn/product/img/20200617141208596385.png",
//            "times": 1,
//            "price": "1",
//            "name": "1红包",
//            "idx": 8
//          }
        ],

        myPrize:{
          "imgUrl": "https://oss.ziyue.cn/product/img/20200617141208596385.png",
          "times": 1,
          "price": "10",
          "name": "红包",
          "idx": 5
        }, //抽中的奖品
        isRunning: false, //转盘是否开始抽奖

        //中奖列表
        joinList:[
          {studentAccount:'131****5328',prizeName:'拉杆箱'},
          {studentAccount:'121****5328',prizeName:'彩绘套装'},
          {studentAccount:'151****5328',prizeName:'小米护眼灯'},
          {studentAccount:'161****5328',prizeName:'绘本两个'},
        ]
      }
    },
    methods:{
      //点击抽奖按钮
      gameStart () {
        let that = this;
        if (that.prizeList && !that.prizeList.length) {
          return
        }
        if (that.isRunning) {
          return
        }
        that.startRun(); //转盘转动
      },

      //具体的抽奖操作
      startRun () {
        let that = this;
        that.isRunning = true

        // 1.转盘匀速转动
        let transformDeg = this.$refs.turntable.style[transformJs]
        let deg = transformDeg.match(/([-]?\d*)deg/) ? transformDeg.match(/([-]?\d*)deg/)[1] : 0
        deg = parseInt(deg)

        let interval = setInterval(() => {
          deg += 2
          deg = deg % 360
          that.$refs.turntable.style[transformJs] = `rotate(${deg}deg)`
        }, 1)

        //2.后台获取抽奖结果
        let randomRes = that.myPrize;

        clearInterval(interval)

        // 3.计算转动角度
        let equallyDeg = 360/that.prizeList.length ; //每个奖品平均占用的角度
        transformDeg = this.$refs.turntable.style[transformJs]
        let lastDeg = transformDeg.match(/([-]?\d*)deg/) ? transformDeg.match(/([-]?\d*)deg/)[1] : 0
        lastDeg = parseInt(lastDeg)

        let finallyDeg = (randomRes.idx+1) * (-equallyDeg) + 360 * 4 + equallyDeg; //debugger  idx+1 equallyDeg之前是60
        this.$refs.turntable.style[transformJs] = `rotate(${finallyDeg}deg)`

        let transTime = parseFloat((finallyDeg - lastDeg) / 360).toFixed(1)

        this.$refs.turntable.style[transition] = `${transformCss} ${transTime}s ease-out`
        // 4. 转动结束后执行
        let runEnd = () => {
          this.$refs.turntable.style[transition] = `${transformCss} 0s`
          let transformDeg = this.$refs.turntable.style[transformJs]
          let deg = transformDeg.match(/([-]?\d*)deg/) ? transformDeg.match(/([-]?\d*)deg/)[1] : 0
          deg = parseInt(deg)
          deg = deg % 360
          this.$refs.turntable.style[transformJs] = `rotate(${deg}deg)`


          // 5,  本地测试不同奖品个数 抽奖成功后。
          setTimeout(function () {
            that.isRunning = false
            that.$refs.turntable.removeEventListener(transitionend, runEnd)
            console.log('本地测试 中奖,停止旋转,',that.myPrize)
          },1000)

          // 5. 显示中奖结果 并更新滚动记录--调取即可欧获取
//        that.ifShowPrize = true;
//        setTimeout(function () {
//          that.getJoinedList();
//          that.isRunning = false
//          that.$refs.turntable.removeEventListener(transitionend, runEnd)
//
//        },1000)
        }

        that.$refs.turntable.addEventListener(transitionend, runEnd)
      },

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped rel="stylesheet/scss">
  .wrap{
    width: 100%;
    height: 100%;
  }
  .turntable-wrap {
    /*position: fixed;*/
    /*bottom: 63px;*/
    position: relative;
    z-index: 2;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;

    .turntable-bg {
      position: absolute;
      top:0;
      left: 0;
      right: 0;
      z-index: 2;
      margin: 0 auto;
      width: 291px;
      height: 290px;
      background: url('https://oss.ziyue.cn/common/active/turntable_bg.png') no-repeat 100% 100%;
      background-size: contain;

      .light {
        position: absolute;
        top: -3px;
        left: 12px;
        width: 269px;
        height: 267px;
        margin: auto;

        background-repeat: no-repeat;
        background-size: 100% 100%;

        animation: changeLight .5s linear infinite;
      }

      .pointer {
        position: absolute;
        top: -6px;
        left: 50%;
        z-index: 1;
        width: 54px;
        height: 51px;
        margin-left: -27px;
        background: url('https://oss.ziyue.cn/common/active/turntable_pointer.png') no-repeat 100% 100%;
        background-size: contain;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .btn-start {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        width: 86px;
        height: 86px;
        margin-left: -43px;
        /* margin-top: -53px; */
        margin-top: -58px;
        background: url('https://oss.ziyue.cn/common/active/turntable_btn.png') no-repeat 100% 100%;
        background-size: contain;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent; // 点击无阴影
      }
      .turntable-prize {
        position: absolute;
        /*top: 27px;*/
        /*left: 42px;*/
        /*width: 208px;*/
        /*height: 208px;*/
        top: 16px;
        left: 32px;
        width: 228px;
        height: 228px;
        transform: rotate(0deg);
        background: url('https://oss.ziyue.cn/common/active/turntable_inner.png') no-repeat 100% 100%;
        background-size: contain;

        //.prize 默认的6个奖品
        .prize {
          position: absolute;
          top: 20px;
          left: 0;
          right: 0;
          margin: 0 auto;
          /*width: 160px;*/
          /*height: 160px;*/

          width: 180px;
          height: 180px;

          transform: rotate(-15deg);
          li {
            position: absolute;
            top: 0;
            left: 0;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            color: #000;
            text-align: center;
            line-height: 80px;

            width: 90px;
            height: 90px;
            line-height: 90px;
            transform-origin: right bottom;
            &:nth-child(1) {
              transform: rotate(60deg);
            }
            &:nth-child(2) {
              transform: rotate(120deg);
            }
            &:nth-child(3) {
              transform: rotate(180deg);
            }
            &:nth-child(4) {
              transform: rotate(240deg);
            }
            &:nth-child(5) {
              transform: rotate(300deg);
            }
            &:nth-child(6) {
              transform: rotate(360deg);
            }
            .li-main {
              transform: rotate(-45deg);

              font-size: 8px;
              color: #A2430E;
              line-height: 10px;
              text-align: center;
              width: 100%;
              height: 100%;
              margin-top: 0;
              margin-left: 0;

              .p-img {
                display: block;
                width: 32px;
                height: 32px;
                border: 0;
                /*margin: 0 auto;*/
                margin: 6px auto 2px;
              }
              .p-name {
                padding-bottom: 2px;
              }
              .p-price {

              }
            }

          }
        }

      }

      .turntable-prize_4{
        background: url('https://oss.ziyue.cn/common/active/turntable_inner_4.png') no-repeat 100% 100%;
        background-size: contain;

        .prize_4{
          transform: rotate(-45deg);
          li{

            &:nth-child(1) {
              transform: rotate(90deg);
            }
            &:nth-child(2) {
              transform: rotate(180deg);
            }
            &:nth-child(3) {
              transform: rotate(270deg);
            }
            &:nth-child(4) {
              transform: rotate(360deg);
            }

          }
        }
      }
      .turntable-prize_5{
        background: url('https://oss.ziyue.cn/common/active/turntable_inner_5.png') no-repeat 100% 100%;
        background-size: contain;

        .prize_5{
          transform: rotate(-27deg);
          li{

            &:nth-child(1) {
              transform: rotate(72deg);
            }
            &:nth-child(2) {
              transform: rotate(144deg);
            }
            &:nth-child(3) {
              transform: rotate(216deg);
            }
            &:nth-child(4) {
              transform: rotate(288deg);
            }
            &:nth-child(5) {
              transform: rotate(360deg);
            }

          }
        }
      }
      .turntable-prize_8{
        background: url('https://oss.ziyue.cn/common/active/turntable_inner_8.png') no-repeat 100% 100%;
        background-size: contain;

        .prize_8{
          transform: rotate(-2deg);
          li{

            &:nth-child(1) {
              transform: rotate(45deg);
            }
            &:nth-child(2) {
              transform: rotate(90deg);
            }
            &:nth-child(3) {
              transform: rotate(135deg);
            }
            &:nth-child(4) {
              transform: rotate(180deg);
            }
            &:nth-child(5) {
              transform: rotate(225deg);
            }
            &:nth-child(6) {
              transform: rotate(270deg);
            }
            &:nth-child(7) {
              transform: rotate(315deg);
            }
            &:nth-child(8) {
              transform: rotate(360deg);
            }

          }
        }
      }
      .turntable-prize_9{
        background: url('https://oss.ziyue.cn/common/active/turntable_inner_9.png') no-repeat 100% 100%;
        background-size: contain;

        .prize_9{
          transform: rotate(4deg);
          li{

            &:nth-child(1) {
              transform: rotate(40deg);
            }
            &:nth-child(2) {
              transform: rotate(80deg);
            }
            &:nth-child(3) {
              transform: rotate(120deg);
            }
            &:nth-child(4) {
              transform: rotate(160deg);
            }
            &:nth-child(5) {
              transform: rotate(200deg);
            }
            &:nth-child(6) {
              transform: rotate(240deg);
            }
            &:nth-child(7) {
              transform: rotate(280deg);
            }
            &:nth-child(8) {
              transform: rotate(320deg);
            }
            &:nth-child(9) {
              transform: rotate(360deg);
            }

          }
        }
      }
    }

  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes changeLight {
    0% {
      background-image: url(https://oss.ziyue.cn/common/active/turntable_light1.png);
    }
    100% {
      background-image: url(https://oss.ziyue.cn/common/active/turntable_light2.png);
    }
  }
</style>
